<template>
	<view>
		<u-popup v-model="popupShow" mode="bottom" height="60%">
			<!-- <view class="header">
				<view class="cancel btn" @click="popupShow = false">取消</view>
				<view class="confirm btn" @click="confirm">确认</view>
			</view> -->
			<scroll-view scroll-y="" class="scroll-view">
				<u-cell-group class="alarm" :border="false">
					<u-cell-item @click="chooseOptions(index)" title="" :value="item[rangeKey]" :value-style="{
							textAlign: 'center'
						}" :arrow="false" v-for="(item,index) in newList" :key="index">
						<view slot="right-icon">
							<u-icon name="checkbox-mark" size="30" :color=" !item.check ? '#fff' : '#027EFF'"></u-icon>
						</view>
					</u-cell-item>
					</u-cell-item>
				</u-cell-group>
			</scroll-view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: 'HMultiSelect',
		model: {
			prop: 'show',
			event: 'change'
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			rangeKey: {
				type: String,
				default: ''
			},
			multi: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			show(newData) {
				this.popupShow = newData;
				if(!this.popupShow){
					this.setList(this.list);
				}
			},
			popupShow(newData) {
				this.$emit('change', newData);
			},
			list(newData){
				this.setList(newData);
			}
		},
		data() {
			return {
				popupShow: false,
				newList: [],
			}
		},
		mounted() {
			this.popupShow = this.show;
			//数据重组
			this.setList(this.list);
		},
		methods: {
			setList(data) {
				this.newList = data.map(item => {
					return {
						...item,
						check: false
					}
				});
			},
			//选择选项
			chooseOptions(index) {
				this.newList[index].check = !this.newList[index].check;
			},
			//确认
			confirm() {
				//计算被选择的数据
				let _all = [];
				this.newList.map((item,index) => {
					if(item.check){
						_all.push(index)
					}
				})
				this.popupShow = false;
				this.$emit('chooseItem',_all);
			}
		}
	}
</script>
<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 80rpx;
		border-bottom: 1px solid #e4e7ed;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			height: 80rpx;
			padding: 0 30rpx;
			line-height: 80rpx;
		}

		.cancel {
			color: rgb(96, 98, 102);
		}

		.confirm {
			color: rgb(41, 121, 255);
		}
	}

	.scroll-view {
		height: calc(100% - 80rpx);
	}
</style>
